{% extends 'manage.html' %}
{% load static %}
{% block title %}
    项目管理-wiki
{% endblock %}



{% block css %}
    <link rel="stylesheet" href="{% static 'plugings/editor-md/css/editormd.css' %}">
    <style>
        .title_list {
            border-right: 2px #ddd solid;
            min-height: 500px;
        }

        .content {
            border-left: 2px #ddd solid;
            min-height: 600px;
        }

        .card-body {
            padding: 0;
        }

        .card {
            margin-top: 10px;
        }

        .add_wiki:hover {
            text-decoration: none;
            font-style: italic;
        }

        .card-header {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .list > li a:hover {
            text-decoration: none;
            font-style: italic;
            cursor: pointer;
            font-weight: bold;
        }
    </style>
{% endblock %}



{% block content %}

    <div class="container-fluid">
        <div class="card">

            <div class="card-header">
                <div>
                    <i class="fa fa-book"> </i> wiki文档库
                </div>

                <div class="function">
                    <a type="button" class="btn btn-success btn-xs"
                       href="{% url 'manage:wiki_add' project_id=request.tracer.project.id %}"><i
                            class="fa fa-plus-circle" aria-hidden="true"></i> 新建</a>
                </div>

            </div>


            <div class="card-body row">
                <div class="col-sm-3 title_list">
                    <ul class="list" id="catalog">

                    </ul>
                </div>
                <div class="col-sm-9 content">
                    <form method="post">
                        {% csrf_token %}
                        {% for filed in form %}
                            {% if filed.name == 'content' %}
                                <div class="form-group">
                                    <label for="{{ filed.id_for_label }}">{{ filed.label }}</label>
                                    <div id="editor">
                                        {{ filed }}
                                    </div>
                                    <sapn class="error-msg">{{ filed.errors.0 }}</sapn>
                                </div>
                            {% else %}
                                <div class="form-group">
                                    <label for="{{ filed.id_for_label }}">{{ filed.label }}</label>
                                    {{ filed }}
                                    <sapn class="error-msg">{{ filed.errors.0 }}</sapn>
                                </div>
                            {% endif %}

                        {% endfor %}
                        <button type="submit" class="btn btn-primary">提 交</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

{% endblock %}



{% block js %}
    <script src="{% static 'plugings/editor-md/editormd.min.js' %}"></script>
    <script>
        var WIKI_DETAIL_URL = '{% url 'manage:wiki' project_id=request.tracer.project.id %}'
        var WIKI_UPLOAD_URL = '{% url 'manage:upload' project_id=request.tracer.project.id %}'
        $(function () {
            initCatalog();
            initEditorMd();
        })

        // 初始化markdown编辑器
        function initEditorMd() {
            editormd('editor', {
                placeholder: '请输入内容',
                height: 500,
                path: "{% static 'plugings/editor-md/lib/' %}",
                imageUpload: true,
                imageFormats: ['jpg', 'jpeg', 'png', 'gif'],
                imageUploadURL: WIKI_UPLOAD_URL
            })
        }

        function initCatalog() {
            //发送ajax请求
            $.ajax({
                url: '{% url 'manage:catalog' project_id=request.tracer.project.id %}',
                type: 'GET',
                dataType: 'JSON',
                success: function (res) {
                    if (res.status) {
                        // 循环每一个res.data

                        $.each(res.data, function (index, item) {
                            var href = WIKI_DETAIL_URL + '?wiki_id=' + item.id
                            // 每个item为一个字典 [1, '第一篇文档', null] [2, 'xxl', null]
                            // [3, 'lhc', null]  [4, 'xl', 2] 这是列表形式
                            var li = $('<li>').attr('id', 'id_' + item.id).append($('<a>').text(item.title).attr('href', href)).append($('<ul>'))
                            if (!item.parent_id) {
                                // 没有父目录则创建一个标签
                                // <li><a></a></li> 添加到catalog中
                                //创建标签  $('<li>').attr('id', 'id_' + item.id).append($('<a>').text(item.title))
                                // 添加进入catalog
                                $('#catalog').append(li)
                            } else {

                                // 找到该目录的父目录
                                $('#id_' + item.parent_id).children('ul').append(li)
                            }
                        })
                    } else {
                        alert('初始化目录失败')
                    }
                }
            })
        }
    </script>
{% endblock %}